<div class="main-section">
    <h1 class="main-section__title">Flexbox</h1>

    <p class="main-section__intro">
        CSS helpers are available to help you build a grid system based on flexbox css property.
    </p>
    
    <lx-component lx-title="Basic usage" lx-path="/includes/css/flexbox/basic.html">
        A row flex container is splitted into 12 or 16 columns specified in the flex-column attribute.<br />
        Each flex item inside a row flex container has a width from 1 to the number of columns.<br />
        If no width is specified, the flex item will fit the available width inside the row.<br />
        A gutter can be specified to separate flex items inside the row (8px, 16px, 24px).
    </lx-component>

    <lx-component lx-title="Options" lx-path="/includes/css/flexbox/option.html">
        Row or column flex container, align and order options are avaialable.
    </lx-component>
</div>